즐겁게, 코드

이틀 전 React 19의 stable 버전이 배포되었는데, 여러 번경사항들 중에서 크게 두 가지가 피부에 와닿았다. 하나는 더이상 ref를 하위 컴포넌트에 전달할 때 forwardRef를 사용하지 않아도 된다는 것이고, 다른 하나는 form submit의 동작이 살짝 변했다는 것이다.💡 만약 폼에서 다루는 데이터 및 검증 구조가 복잡해지거나, 컴포넌트 구조가 중첩된다면 react-hook-form을 도입해볼 것을 권해드립니다.먼저 React 18 이하에서는 폼 제출 코드를 다음과 같이 작성한다.// React @^18import { FormEventHandler } from "react";const App = () => { const handleSubmit: FormEventHandler = (e)..

함수 컴포넌트를 사용할 때 React.FC 라는 제네릭을 활용하면 children, displayName, defaultProps 등의 함수 컴포넌트가 갖는 기본 속성들에 대해 타입 지원을 받을 수 있습니다. import React from "react"; export const Child: React.FC = ({children}) => { return {children} } 아마 React.FC를 사용하는 가장 큰 이유도 chlidren을 갖는 컴포넌트의 타입을 지정하기 위해서일 텐데요, 하지만 React 18부터는 위 코드에서 Property 'children' does not exist on type... 이라는 오류가 출력됩니다. 그 이유는 children 프로퍼티가 React.FC에서 제외되었..

자바스크립트 단에서 화면 사이즈를 기반으로 모바일 여부를 검사하는 useIsMobile 훅을 제작하고 있었습니다. import { useEffect, useState } from "react"; const useIsMobile = () => { const [isMobile, setIsMobile] = useState(false); const [screenWidth, setScreenWidth] = useState(0); const handleScreenResize = () => { setScreenWidth(window.innerWidth); screenWidth > 768 ? setIsMobile(false) : setIsMobile(true); }; useEffect(() => { handleScre..

TL;DR 1. 리액트에서는 중복되는 상태 업데이트를 배칭으로 처리하고 있다. 2. 기존에는 비동기 프로세스 안에서 발생하는 중복된 상태 업데이트에는 배칭을 적용하지 않았지만, 버전 18부터는 항상 배칭을 적용한다. 2013년 처음 세상에 등장한 리액트는 현재 최고의 전성기를 누리고 있고, 이제는 버전 18의 출시를 눈앞에 두고 있습니다. 버전 17에서는 내부적인 최적화 및 안정화에 초점을 맞춰 별다른 변화를 체감하지 못했지만, 현재 베타로 출시된 리액트 버전 18에서는 몇 가지 눈에 띄는 변경사항이 있는데요, 오늘은 그 중 automatic-batching 이라는 새로 추가된 성질을 소개해보려 합니다. 시작하기 전에 시작하기 전, 리액트 버전 18의 설정방법을 간단히 소개하고자 합니다. 1. 최신 버전..

자식 요소를 감싸는 래퍼 컴포넌트를 작성할 때 자식 요소인 children 속성의 타입을 명시해야 하는 경우가 자주 있습니다. 그런데, ReactChild, ReactElement, ReactNode 등 비슷한 이름을 갖는 타입이 너무 많은 모습이네요! 오늘은 자주 사용되는 타입 설명과 함께 어떤 상황에서 각 타입을 사용할 수 있을지 간단히 알아보도록 하겠습니다. const App = () => { return ( {/* 과연 children 요소의 타입은 무엇일까요? */} Hello, world! ); }; type WrapperProp = { // children: React.ReactChild; // children: React.ReactElement; // children: JSX.Element..

지난 글에서는 리코일이 무엇인지와 리코일과 기존 상태관리 방법의 차이를 간단하게 소개했는데요, 이번 글에서는 실제로 동작하는 여러 앱에서 리코일을 사용해 상태를 관리해보겠습니다. 리코일 설치하기 CRA로 프로젝트를 구성했다고 가정하고, 리코일을 설치해 보겠습니다. // yarn yarn add recoil // npm npm i recoil 리덕스를 사용할 때는 redux, react-redux, 경우에 따라서는 redux-thunk, redux-saga까지 설치해야 했지만, 이제는 리코일만 설치하면 됩니다! 리코일 루트 컴포넌트 정의하기 리코일을 사용하기 이전, 리코일로 전역 상태를 관리할 범위를 컴포넌트로 감싸줍니다. Tip. 는 리덕스나 컨텍스트의 Provider와 같은 역할을 합니다. import..

오늘은 리코일에 대한 이야기를 간단하게 해보려 합니다. 리코일은 페이스북에서 만든 상태 관리 라이브러리로, 리덕스에 비해 코드가 간결하고 직관적인 로직을 구성할 수 있다는 장점이 있습니다. 실제로 페이스북 팀에서도 "리코일은 리액트처럼 작동하고 생각합니다." 라는 내용을 장점으로 내세웁니다. Context API와의 차이 컨텍스트는 리액트에 내장된 상태 관리용 API로, 별도의 라이브러리를 사용하지 않고도 상태를 관리할 수 있다는 장점이 있습니다. 다만 컨텍스트는 중첩 가능한 Provider 컴포넌트와 useContext() 훅을 활용해 provider - consumer 관계를 구현하는데, 이러면 여러 컨텍스트가 중첩될 경우 값을 재계산하는 과정에서 성능 하락이 있을 수도 있습니다. 한번 인증 정보, ..